var expanderModule = angular.module('expanderModule', []);
expanderModule.directive('expander', function () {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: {
            title: '=expanderTitle'
        },
        template: '<div>'
            + '<div class="title" ng-click="toggle()">{{title}}</div>'
            + '<div class="body" ng-show="showMe" ng-transclude></div>'
            + '</div>',
        link: function (scope, element, attrs) {
            scope.showMe = false;
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
            }
        }
    }
});

expanderModule.directive('pane', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: { title: '@' },
        template: '<div style="border: 1px solid black;">' +
            '<div style="background-color: gray">{{title}}</div>' +
            '<div ng-transclude></div>' +
            '</div>'
    };
});

expanderModule.controller('Ctrl', function ($scope) {

});

expanderModule.controller('SomeController', function ($scope) {
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';
});